<template>
	<view class="body">
		<view class="search p20">
			<u-search placeholder="请输入关键词或产品名称" v-model="keyword" @search="getSearch" @custom='getSearch'></u-search>
		</view>
		<scroll-view scroll-x class="scroll d-s-c p20" v-if="menu.length>0">
			<view v-for="(item,index) in menu" class="item tc" @click="setAct(index)">
				<view class="pr">
					<image :src="item.pic" mode="aspectFill"></image>
					<text class="white pos">{{item.name}}</text>
				</view>
				<view class="p10">{{name}}</view>
			</view>
		</scroll-view>
		<scroll-view scroll-x class="scroll" v-if="menu[0]&&menu[active].child.length>0">
			<view v-for="(item,index) in menu[active].child" :key="index" class="item2 pt10 pb10 pl30 pr30 mr20"
				:class="active2==index?'acitve':''" @click="setAct2(index)">{{item.name}}</view>
		</scroll-view>
		<view class="list pb20 mt30 pt10" v-if="list.length>0">
			<view class="d-b-c f-w p20">
				<view class="item bg-white" v-for="(item,index) in list" :key="index" @click="jump(`/pages/cats/detail?id=${item.id}`)">
					<image class="ww100" :src="item.pic" mode="aspectFit"></image>
					<view class="f28 p20">{{item.name}}</view>
				</view>
			</view>
			<u-loadmore line color="#fff" :status="status"></u-loadmore>
		</view>
		<u-empty v-else mode="list" marginTop="20vh"></u-empty>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				keyword: '',
				id: null,
				list: [],
				menu: [],
				active: 0,
				active2: 0,
				name: "",
				pagenum: 1,
				status: "loadmore"
			}
		},
		methods: {
			jump(url) {
				app.goto(url)
			},
			setAct(i) {
				this.active = i
				this.active2 = 0
				this.getSearch()
			},
			setAct2(i) {
				this.active2 = i
				this.getSearch()
			},
			getSearch() {
				this.list = []
				this.pagenum = 1
				this.getList()
			},
			getList() {
				if (this.pagenum == 0) return
				this.status = 'loading'
				app.post('ApiShop/getprolist', {
					pagenum: this.pagenum,
					keyword: this.keyword,
					cid: this.menu.length > 0 ? this.menu[this.active].child.length > 0 ? this.menu[this.active]
						.child[this.active2].id : this.menu[this.active].id : this.id,
				}, (res) => {
					if (res.status == 1) {
						this.list = this.list.concat(res.data)
						this.pagenum++
						if (res.data.length < 10) {
							this.status = 'nomore'
							this.pagenum = 0
						}

					}
				})
			},
			getMenu() {
				app.get('ApiShop/getdownclist3', { id: this.id }, (res) => {
					if (res.status == 1) {
						this.menu = res.data
						this.getList()
					}
				})
			}
		},
		onLoad(options) {
			this.name = options.name
			this.id = options.id
			this.getMenu()
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.list {
		background-color: #353535;

		.item {
			width: calc(50% - 10rpx);
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				height: 600rpx;
				display: block;
			}
		}
	}

	.scroll {
		white-space: nowrap;

		.item2 {
			display: inline-block;
		}

		.acitve {
			background-color: #000;
			color: #fff;
			border-radius: 30rpx;
		}

		.item {
			display: inline-block;
			width: calc(50% - 20rpx);
			margin: 10rpx;
			border-radius: 20rpx;
			overflow: hidden;
			border: 1px solid #ccc;

			.pr {
				.pos {
					position: absolute;
					bottom: 10rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			image {
				display: block;
				width: 100%;
				height: 200rpx;
			}
		}
	}

	.body {
		background-color: #f6f6f6;
	}

	.search {
		background-color: #fff;
		white-space: nowrap;

		.item {
			display: inline-block;
		}
	}
</style>